<template>
	<view class="cartContainer">
		<view class="title">购物车</view>
		<!-- 购物车列表 -->

		<scroll-view scroll-y="true" class="scroll-view" >
			
		<view class="cartList" v-for="(item,index) in shopcardata" :key="item.id">
			<view class="cartItem" >
				<text  @click="changeIsCheck(item)" class="iconfont icon-xuanzhong" :class="{ selected: item.isChecked }"></text>
				<view class="shopItem">
					<image class="shopImg" :src="item.img"></image>
					<view class="shopInfo">
						<text >{{item.description}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
				<!-- 控制数量 -->
				<view class="countCtrl">
					<text class="add" @click="changeNum(item,1)">+</text>
					<text class="count">{{item.count}}</text>
					<text class="del" @click="changeNum(item,-1,index)">-</text>
				</view>
			</view>
		</view>
		
		</scroll-view>
		
		<!-- 底部下单 -->
		<view class="cartFooter">
			<text @click="changeIsCheckAll" class="iconfont icon-xuanzhong" :class="isCheckAll && 'selected'"></text>
			<text class="allSelected">已选 {{checkedNum}}</text>
			<view class="right">
				<text class="totalPrice">合计: {{totalPrice}}</text>
				<text class="preOrder">下单</text>
			</view>
		</view>

	</view>
</template>

<script>
import {mapState} from "vuex" 
export default {
	data() {
		return {
			
		};
	},
	methods: {
		changeIsCheck(item){
			item.isChecked = !item.isChecked
		},
		
		changeIsCheckAll(){
			let currentFlag = !this.isCheckAll
			this.shopcardata.forEach(item => {
				if(item.isChecked === currentFlag) return
				item.isChecked = currentFlag
			})
		},
		
		
		changeNum(item,num,index){
			if(num > 0){
				// 用户点的是+
				item.count++
			}else{
				if(item.count > 1){
					item.count --
				}else{
					wx.showModal({
						title:`你确定要删除${item.description}吗？`,
						success:(res) => {
							if(res.confirm){
								//用户点击了确定按钮
								this.$store.commit('shopcart/DELETE_SHOPCART',index)
							}
						}
					})
				}
			}
		},
		
		
		
		
		
		
		
	},
	computed:{
		...mapState('shopcart', ['shopcardata']),
		totalPrice(){
			return this.shopcardata.reduce((prev,item) => {
					if(item.isChecked){
						prev += item.price * item.count
					}
					return prev
				},0)
		},
		checkedNum(){
			return this.shopcardata.reduce((prev,item) => {
				if(item.isChecked){
					prev += item.count
				}
				return prev
			},0)
		},
		isCheckAll(){
			return this.shopcardata.every(item => item.isChecked) && this.shopcardata.length > 0
		}
	}
};
</script>

<style lang="stylus">
	.cartImg
		display block
		width 248upx
		height 248upx
		margin 300upx auto 50upx
	
	.cartContainer
		position relative
		background #f4f4f4
		height 100%
		.scroll-view
			height calc(100vh - 180upx)
		.title
			font-size 32upx
			line-height 80upx
			margin-left 30upx
		.header
			display flex
			background #eee
			text
				width 33.333%
				height 80upx
				line-height 80upx
				text-align center
				font-size 26upx
		.contentContainer
			
			button
				width 480upx
				height 92upx
				background #DD1A21
				color #fff
				font-size 32upx
				line-height 92upx
			.addMore
				text-align center
				font-size 26upx
				color #7f7f7f
				line-height 60rpx
		.cartList
			.cartItem
				position relative
				display flex
				height 172upx
				background #fff
				margin-top 20upx
				padding 20upx
				.iconfont
					font-size 40upx
					line-height 172upx
					margin 0 40upx
					color #999
					&.selected
						color: #BB2C08
				.shopItem
					display flex 
					.shopImg
						width 172upx
						height 172upx
						background #eee
					.shopInfo
						font-size 28upx
						display flex
						flex-direction column
						margin-left 20upx
						text
							width 392rpx
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							line-height 60upx
						.price
							color: #BB2C08
				.countCtrl
					position absolute
					right 20upx
					bottom 30upx
					text
						display inline-block
						width 60upx
						height 50upx
						text-align center
						line-height 50upx
						border 1upx solid #EEEEEE
						&:nth-child(2)
							border none
							border-top 1upx solid #EEEEEE
							border-bottom 1upx solid #EEEEEE
		.cartFooter
			position absolute
			display flex	
			bottom 2rpx
			height 96upx
			line-height 96upx
			width 100%
			background #fff
			font-size 30upx
			.iconfont
				font-size 40upx
				margin 0 20upx
				color: #999
				&.selected
					color: #BB2C08
			.right 
				height 96upx
				position absolute
				right 0
				.totalPrice
					display inline-block
					height 96upx
					line-height 96upx
				.preOrder
					display inline-block
					background #DD1A21
					width 225upx
					height 96upx
					line-height 96upx
					text-align center
					font-size 28upx
					color #fff
					margin-left 30upx
		.hint
			text-align center
			font-size 28upx
</style>
